import { h, mergeProps, withCtx, renderSlot, ref, computed, watch, nextTick } from 'vue';
import Scroll from '../base/scroll/scroll.vue';
import { useStore } from 'vuex';

export default {
  name: 'wrap-scroll',
  props: Scroll.props,
  emits: Scroll.emits,
  render(ctx) {
    // h 相当于Vue2中的createElement
    return h(Scroll, mergeProps({ ref: 'scrollRef' }, ctx.$props, {
      onScroll: (e) => {
        ctx.$emit('scroll', e);
      }
    }), {
      default: withCtx(() => {
        return [renderSlot(ctx.$slots, 'default')];
      })
    });
  },
  setup(props) {
    const scrollRef = ref(null);
    const store = useStore();
    const playlist = computed(() => store.state.playList);

    const scroll = computed(() => {
      return scrollRef.value.scroll;
    });

    watch(playlist, async () => {
      await nextTick();
      scroll.value.refresh();
    });

    return {
      scrollRef,
      scroll
    };
  }
};
